<template>
    <div class="deposit-list-page">
        <TopTitleExit title="Transaction History" :exit="routerExit"></TopTitleExit>
        <div class="body">
            <div class="tabbar">
                <div class="list">
                    <div class="item" v-for="item in tabbar" :key="item.id" @click="active_tab = item" :style="`background-color: ${ active_tab.id == item.id ? 'var(--active-color)' : '#00000000' }`">
                        <div class="text" :style="`color: ${ active_tab.id == item.id ? '#fff' : 'var(--text-color)' }`">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="deposit-list" v-if="show_list">
                <div class="item" v-for="item in list" :key="item?.id">
                    <div class="icon" :style="`background-color: ${ item?.type == 'Deposit' ? 'var(--positive-number-light-color)' : 'var(--negative-number-light-color)' }; --color: ${ item?.type == 'Deposit' ? 'var(--positive-number-strong-color)' : 'var(--negative-number-strong-color)' };
                    --border-top: ${ item?.type == 'Deposit' ? 'var(--ptr-line-width)' : '0' };
                    --border-bottom: ${ item?.type == 'Deposit' ? '0' : 'var(--ptr-line-width)' };
                    --border-left: ${ item?.type == 'Deposit' ? '0' : 'var(--ptr-line-width)' };
                    --border-right: ${ item?.type == 'Deposit' ? 'var(--ptr-line-width)' : '0' }`"></div>
                    <div class="info">
                        <div class="left-box">
                            <div class="title">
                                <div class="type">{{ item?.type }}</div>
                                <div class="status" :style="`background-color: ${ (item?.type == 'Deposit' ? depositType : withdrawType)[item?.status].bg }; color: ${ (item?.type == 'Deposit' ? depositType : withdrawType)[item?.status].tc }`">{{ (item?.type == 'Deposit' ? depositType : withdrawType)[item?.status].text }}</div>
                            </div>
                            <div class="date">{{ format_utc5(item?.time * 1000) }}</div>
                        </div>
                        <div class="right-box">
                            <div class="price" :style="`color: ${ item?.type == 'Deposit' ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item?.type == 'Deposit' ? '+' : '-' }}${{ item?.price }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { routerExit } from '@/utils/jump.js';
import { depositService, depositList, withdrawList } from '@/service/deposit.js';
import { format_utc5 } from '@/utils/time.js';

const show_list = ref(false);

const tabbar = [
    {
        id: 0,
        name: 'All'
    },
    {
        id: 1,
        name: 'Deposit'
    },
    {
        id: 2,
        name: 'Withdraw'
    }
];

const depositType = {
    0: {
        text: 'Pending',
        bg: '#fef9c3',
        tc: '#854d0e',
    },
    1: {
        text: 'Completed',
        bg: '#dcfce7',
        tc: '#166534',
    },
    2: {
        text: 'Completed',
        bg: '#dcfce7',
        tc: '#166534',
    },
    3: {
        text: 'Rejected',
        bg: '#fee2e2',
        tc: '#991b1b',
    },
};

const withdrawType = {
    0: {
        text: 'Pending',
        bg: '#fef9c3',
        tc: '#854d0e',
    },
    1: {
        text: 'Completed',
        bg: '#dcfce7',
        tc: '#166534',
    },
    2: {
        text: 'Completed',
        bg: '#dcfce7',
        tc: '#166534',
    },
    3: {
        text: 'Rejected',
        bg: '#fee2e2',
        tc: '#991b1b',
    },
    4: {
        text: 'Cancelled',
        bg: '#eeeeee',
        tc: '#aaaaaa',
    },
};

const active_tab = ref(tabbar[0]);

const depositList_ = computed(() => {
    return depositList.value.map((item) => {
        return {
            ...item,
            type: 'Deposit',
            price: item.amount,
            time: item.createTime,
        };
    });
});

const withdrawList_ = computed(() => {
    return withdrawList.value.map((item) => {
        return {
            ...item,
            type: 'Withdraw',
            price: item.amount,
            time: item.createTime,
        };
    });
});

const allList = computed(() => {
    return [...depositList_.value, ...withdrawList_.value].sort((a, b) => {
        return b.time - a.time;
    });
});

const list = computed(() => {
    let active_tab_id = active_tab.value.id;
    if (active_tab_id == 0) {
        return allList.value;
    } else if (active_tab_id == 1) {
        return depositList_.value;
    } else if (active_tab_id == 2) {
        return withdrawList_.value;
    }
});

onMounted(async () => {
    show_list.value = true;
    depositService.getDepositList();
    depositService.getWithdrawList();
});
</script>

<style scoped lang="less">
.deposit-list-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;

    .body {
        flex: 1;
        box-sizing: border-box;
        background-color: var(--bg-color);
        padding: 5vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;
        overflow-x: hidden;
        overflow-y: auto;

        .tabbar {
            display: flex;

            .list {
                display: flex;
                border: 0.1vw solid var(--border-color);
                border-radius: 2vw;
                overflow: hidden;
            }

            .item {
                padding: 2vw 4vw;
                display: flex;
                justify-content: center;
                align-items: center;

                .text {
                    font-size: 3vw;
                }
            }
        }

        .deposit-list {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding: 2vw;
            border-radius: 2vw;
            background-color: #fff;
            box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);

            .item {
                display: flex;
                align-items: flex-start;
                gap: 2vw;
                padding: 3vw;
                border-bottom: 0.1vw solid var(--border-color);

                &:last-child {
                    border-bottom: none;
                }

                .icon {
                    --size: 9vw;
                    --ptr-size: 0.3;
                    --ptr-line-width: 1vw;
                    width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                    position: relative;

                    &::before, &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                    }

                    &::before {
                        width: var(--size);
                        height: var(--size);
                        transform: translate(-50%, -50%) scale(var(--ptr-size));
                        border-top: var(--border-top) solid var(--color);
                        border-bottom: var(--border-bottom) solid var(--color);
                        border-left: var(--border-left) solid var(--color);
                        border-right: var(--border-right) solid var(--color);
                    }

                    &::after {
                        width: calc(var(--size) * 1.414);
                        height: var(--ptr-line-width);
                        background-color: var(--color);
                        transform: translate(-50%, -50%) rotate(-45deg) scale(var(--ptr-size));
                    }
                }

                .info {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;

                    .left-box {
                        display: flex;
                        flex-direction: column;
                        gap: 1vw;

                        .title {
                            display: flex;
                            align-items: center;
                            gap: 1vw;

                            .type {
                                font-size: 3.5vw;
                                font-weight: 600;
                            }

                            .status {
                                font-size: 3vw;
                                padding: 0.7vw 2vw;
                                border-radius: 100vw;
                            }
                        }

                        .date {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }

                    .right-box {
                        .price {
                            font-size: 3.5vw;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
}
</style>